<template>
  <div class="VerificationCodeBox">
    <p class="VerificationCodeTit">
      你的手机号：<span class="phone"
        >+{{ CountryCodeObj.code }} {{ phone.substring(0, 3) }}****{{
          phone.substring(7)
        }}</span
      >
    </p>
    <p class="Tips">为了安全，我们会给你发送短信验证码</p>
    <div class="numInputs">
      <input
        v-for="(n, index) in amount"
        v-model="arr[index]"
        maxlength="1"
        @keydown="nextFocus($event, index)"
        ref="numInput"
        :key="index"
        type="tel"
        :class="
          arr[index] ? 'VerificationCodeInputTe' : 'VerificationCodeInput'
        "
      />
    </div>
    <div class="errorBox">
      <span class="errorTxt" v-if="isShowError"
        ><i class="VerificationCodeError"></i>验证码错误</span
      >
      <i></i>
      <span class="Resend" @click="getCode">{{ ResendTxt }}</span>
    </div>
    <div class="register" @click="registerFn">
      <i>下一步</i>
    </div>
  </div>
</template>

<script>
import { getCode, verify, register } from "@/api";
import { mapActions } from "vuex";
export default {
  props: { phone: String, password: String, CountryCodeObj: Object },
  data() {
    return {
      arr: [],
      amount: 4,
      ResendTxt: "重新发送",
      isGetCode: true,
      isShowError: false,
    };
  },
  created() {
    this.$nextTick(() => {
      this.$refs.numInput[0] && this.$refs.numInput[0].focus();
    });
  },
  methods: {
    ...mapActions("loginStore", [
      "setChange_userInfo",
      "setChange_isShowLoginBox",
      "setChange_ChoiceNum",
    ]),
    nextFocus($event, index) {
      // 键入时光标跳转
      this.arr[index] &&
        this.$refs.numInput[index + 1] &&
        this.$refs.numInput[index + 1].focus();
      // 删除
      if ($event.keyCode === 8) {
        if (this.arr[index]) {
          this.arr[index] = "";
          this.arr = JSON.parse(JSON.stringify(this.arr));
          this.$refs.numInput[index].focus();
        } else {
          this.$refs.numInput[index - 1] &&
            this.$refs.numInput[index - 1].focus();
        }
      }
    },
    //获取验证码
    async getCode() {
      if (!this.isGetCode) return;
      this.isGetCode = false;
      await getCode({
        phone: this.phone,
        ctcode: this.CountryCodeObj.code,
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "验证码发送成功",
            type: "success",
          });
        }
      });
      this.ResendTxt = 60;
      let that = this;
      let countDown = setInterval(() => {
        that.ResendTxt = that.ResendTxt - 1;
        if (that.ResendTxt <= 0) {
          this.isGetCode = true;
          that.ResendTxt = "重新发送";
          clearInterval(countDown);
        }
      }, 1000);
    },
    //注册函数
    async registerFn() {
      let isError = true;
      if (this.arr.join("").length != 4) {
        this.$message.error("验证码格式错误");
        return;
      }
      await verify({
        phone: this.phone,
        captcha: this.arr.join(""),
        ctcode: this.CountryCodeObj.code,
      }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          isError = false;
        }
      });
      if (isError) return;
      register({
        captcha: this.arr.join(""),
        phone: this.phone,
        password: this.password,
      }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$message({
            message: "注册成功",
            type: "success",
          });
          //以后添加注册成功逻辑，免登录；
          this.setChange_userInfo(res);
          this.setChange_isShowLoginBox(false);
          this.setChange_ChoiceNum(1);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.VerificationCodeBox {
  width: 220px;
  margin: 0 auto;
  padding: 30px 0 43px;
  .VerificationCodeTit {
    color: #666;
    font-size: 12px;
    .phone {
      color: #333;
      font-weight: 700;
    }
  }
  .Tips {
    color: #999;
    font-size: 12px;
    margin-top: 5px;
  }
  .numInputs {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    .VerificationCodeInput {
      width: 50px;
      text-align: center;
      margin: 0 3px;
      border: none;
      font-size: 24px;
      outline: none;
      border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    }
    .VerificationCodeInputTe {
      width: 50px;
      text-align: center;
      margin: 0 3px;
      border: none;
      font-size: 24px;
      outline: none;
      border-bottom: 2px solid#B82712;
    }
  }
  .errorBox {
    display: flex;
    justify-content: space-between;
    .errorTxt {
      color: #e33232;
      font-size: 12px;
      .VerificationCodeError {
        width: 14px;
        height: 14px;
        display: inline-block;
        margin-right: 5px;
        vertical-align: middle;
        background: url("./../../assets/imges/btnIconTwo.png") no-repeat -50px -270px;
      }
    }
    .Resend {
      color: #0c73c2;
      cursor: pointer;
      font-size: 12px;
    }
  }
  .register {
    margin-top: 10px;
    border-radius: 4px;
    color: #333;
    text-align: center;
    display: inline-block;
    overflow: hidden;
    padding: 0 5px 0 0;
    cursor: pointer;
    background: url("./../../assets/imges/backgroundStripe.png") no-repeat right -428px;
    i {
      width: 180px;
      height: 31px;
      padding: 0 15px 0 20px;
      color: #fff;
      font-size: 12px;
      line-height: 31px;
      background: url("./../../assets/imges/backgroundStripe.png") no-repeat 0 -387px;
      display: inline-block;
    }
  }
}
</style>